<template lang="pug">
  .charged
    .title 计费
    .module
      .trianglebg
        .tri.tri-1(:class="{active:unitIndex==1}")
        .tri.tri-2(:class="{active:unitIndex==2}")
        .tri.tri-3(:class="{active:unitIndex==3}")
        .tri.tri-4(:class="{active:unitIndex==4}")
        .tri.tri-5(:class="{active:unitIndex==5}")
      .msg 单位（部门）计费
      ul
        li(v-for="(unit,index) of units" @mouseenter="enter(index)" @mouseleave="leave()")
          .name {{unit.name}}
          .price {{process$(unit.value)}}元

    .module
      .trianglebg
        .tri.tri-1(:class="{active:systemIndex==1}")
        .tri.tri-2(:class="{active:systemIndex==2}")
        .tri.tri-3(:class="{active:systemIndex==3}")
        .tri.tri-4(:class="{active:systemIndex==4}")
        .tri.tri-5(:class="{active:systemIndex==5}")
      .msg 应用系统
      ul
        li(v-for="(system,index) of systems" @mouseenter="entersystem(index)" @mouseleave="leavesystem()")
          .name {{system.name}}
          .price {{process$(system.value)}}元
    .m-total-comp
      .comp
        .value {{process$(total)}}元
        .desc 计费总值
    .m-btns
      .btn(:class="{active:Index===1}" @click="setMax") 最大
      .btn(:class="{active:Index===2}" @click="setMin") 最小

</template>
<script>
export default {
  data () {
    return {
      units: [],
      systems: [],
      total: 9203.30,
      Index: 1,
      unitIndex: -1,
      systemIndex: -1
    }
  },
  mounted () {
    this.$axios.get('/data.json').then(res => {
      if (res.status === 200) {
        this.units = res.data.units
        this.systems = res.data.systems
      }
    })
  },
  methods: {
    setMax () {
      this.Index = 1
      this.units.sort((a, b) => {
        return b.value - a.value
      })
      this.systems.sort((a, b) => {
        return b.value - a.value
      })
    },
    setMin () {
      this.Index = 2

      this.units.sort((a, b) => {
        return a.value - b.value
      })
      this.systems.sort((a, b) => {
        return a.value - b.value
      })
    },
    enter (index) {
      this.unitIndex = index + 1
    },
    leave () {
      this.unitIndex = -1
    },
    entersystem (index) {
      this.systemIndex = index + 1
    },
    leavesystem () {
      this.systemIndex = -1
    },
    process$ (value) {
      let regex = /\B(?=(\d{3})+(?!\d))/g
      return value.toString().replace(regex, ',')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .charged
    position relative
    height 458px
    background-color: #09153d;
    box-shadow: 0px 1px 2px 0px rgba(9, 14, 33, 0.75);
    margin-bottom 18px
    .title
      padding 0 15px
      height 32px
      line-height @height
      background-color #041646
      font-size 14px
    .module
      position relative
      margin-bottom 15px
      &:last-child
        margin-bottom 0
      .msg
        width 130px
        font-size 14px
        text-align right
        line-height 40px
        color #46a4eb
      ul
        li
          position relative
          height 30px
          line-height @height
          font-size 12px
          display flex
          justify-content  space-between
          width 378px
          &:after
            content ''
            position absolute
            top 15px
            left  114px
            width: 163px;
            border: dashed   1px #1c4b74;
          .name
            color #ccf8fe
            width 110px
            text-align right
          .price
            color #4db3fe
            width 110px
            text-align left
            letter-spacing: 1px;
            transform translateY(12px)
      .trianglebg
        position absolute
        width 338px
        height 161px
        top 40px
        left 130px
      .tri
        position absolute
        bottom 0
        border 1px solid transparent
        width 0
        transition all .3s ease
        cursor pointer
        &.active
          transform scale(1.1)
        &.tri-1
          border-width 0 169px 161px 169px
          border-bottom-color #0c214c
        &.tri-2
          border-width 0 169px 131px 169px
          border-bottom-color #111d48
          filter drop-shadow(0 0 1px #15255b)
        &.tri-3
          border-width 0 169px 93px 169px
          border-bottom-color #08275d
          filter drop-shadow(0 0 1px #0a2d68)
        &.tri-4
          border-width 0 169px 60px 169px
          border-bottom-color #132e5d
          filter drop-shadow(0 0 1px #123e68)
        &.tri-5
          border-width 0 169px 30px 169px
          border-bottom-color #1f6c82
          filter drop-shadow(0 0 1px #1a3069)
    .m-total-comp
      position absolute
      top 71px
      right 21px
      width 128px
      height 71px
      border solid 1px #0c287e
      &:before
      &:after
        position absolute
        content ""
        width 5px
        height 5px
        background-color #0c287e
      &:before
        top -3px
        left -3px
      &:after
        bottom -3px
        left -3px
      .comp
        width 100%
        height 100%
        text-align center
        padding 13px 0
        &:before
        &:after
          position absolute
          content ""
          width 5px
          height 5px
          background-color #0c287e
        &:before
          top -3px
          right -3px
        &:after
          bottom -3px
          right -3px
        .value
          font-size 20px
          color #0bced0
        .desc
          font-size 14px
          color #bce5fd
          margin-top 16px
    .m-btns
      position absolute
      top 224px
      right 45px
      .btn
        width 53px
        height 20px
        line-height @height
        text-align center
        border solid 1px #263a7c
        border-radius 2px
        margin-bottom 22px
        color  #fefefe
        font-size 14px
        cursor pointer
        &.active
          background-color: #025bbf;
          border 1px solid #09153d

</style>
